<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    sort-by="calories"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-toolbar
        flat
      >
        <v-toolbar-title>测试计划</v-toolbar-title>
        <v-divider
          class="mx-4"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>
        <v-dialog
          v-model="dialog"
          max-width="500px"
        >
        <template>
          <v-data-table
            :headers="buildHeaders"
            :items="buildData"
            :items-per-page="5"
            class="elevation-1"
          ></v-data-table>
          </template>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:[`item.actions`]="{ item }">
      <v-btn
        @click="getBuild(item)"
      >
        查看记录
      </v-btn>
    </template>
  </v-data-table>
</template>
<script>
  export default {
    data: () => ({
      dialog: false,
      headers: [
        {
          text: 'ID',
          align: 'start',
          sortable: false,
          value: 'id',
        },
        { text: '计划名称', value: 'name' },
        { text: '关联用例', value: 'testcases' },
        { text: '操作', value: 'actions', sortable: false },
      ],
      desserts: [],
        // 构建记录表头
      buildHeaders: [
        {
          text: 'ID',
          align: 'start',
          sortable: false,
          value: 'id',
        },
        { text: '计划id', value: 'plan_id' },
        { text: '报告', value: 'report' },
        { text: '创建时间', value: 'create_time' },
      ],
      // 构建记录表体
      buildData: []

    }),

    created () {
      this.initialize()
    },

    methods: {
      initialize () {
        this.$api.plan.getPlan().then((result) => {
          console.log("获取到的测试计划为", result)
          this.desserts = result.data.msg.data
        }).catch((err) => {
          console.log(err)
        });
      },
      //点击查看记录按钮，发起查看记录的请求
      getBuild(item){
        // 展示弹窗
        this.dialog = true;
        // 获取plan_id，通过item传入
        console.log(item.id)
        // 获取plan_id 然后传入
        this.$api.build.getBuild({"plan_id":item.id}).
        then((result) => {
          console.log("获取到的构建记录为", result)
          this.buildData = result.data.msg.data

        }).catch((err) => {
          console.log(err)
        });      
        }
    },
  }
</script>